import React from 'react';
import {ScrollView, Text, View,Dimensions,Image} from 'react-native';

import Steps from './Steps';

const Step = Steps.Step;
const {width,height} = Dimensions.get('window');

export default class StepsDemo extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      steps1: [
        {title: 'Finished', description: 'This is description'},
        {title: 'In Progress', description: 'This is description'},
        {title: 'Waiting', description: 'This is description'},
      ],
      steps2: [
        {
          title: 'Finished',
          description: 'This is description',
          status: 'finish',
        },
        {
          title: 'In Progress',
          description: 'This is description',
          status: 'process',
        },
        {
          title: 'Waiting',
          description: 'This is description',
          status: 'error',
        },
        {
          title: 'Waiting',
          description: 'This is description',
          status: 'wait',
        },
      ],
    };
  }

  render() {
    return (
      <ScrollView
        style={{flex: 1}}
        automaticallyAdjustContentInsets={false}
        showsHorizontalScrollIndicator={false}
        showsVerticalScrollIndicator={false}
      >
        <View style={{marginTop: 60,alignItems:'center',width:width,justifyContent:'center'}}>
          <Steps size="small" current={1} direction="horizontal">
            {this.state.steps1.map((item, index) => (
              <Step
                key={index}
                title={
                  <View>
                    <Text>title:{item.title}</Text>
                  </View>
                }
                status={item.status}
              />
            ))}
          </Steps>
        </View>
        <View style={{marginTop: 60}}>
          <Steps size="small" current={1}>
            {this.state.steps1.map((item, index) => (
              <Step
                key={index}
                title={
                  <View>
                    <Text>title:{item.title}</Text>
                  </View>
                }
                description={
                  <View>
                    <Text>desc:{item.description}</Text>
                  </View>
                }
                status={item.status}
              />
            ))}
          </Steps>
        </View>
        <View>
          <Steps size="small">
            {this.state.steps2.map((item, index) => (
              <Step
                key={index}
                title={item.title}
                description={item.description}
                status={item.status}
              />
            ))}
          </Steps>
        </View>
        <View>
          <Steps current={1}>
            {this.state.steps1.map((item, index) => (
              <Step
                key={index}
                title={item.title}
                description={item.description}
                status={item.status}
              />
            ))}
          </Steps>
        </View>
        <View>
          <Steps>
            {this.state.steps2.map((item, index) => (
              <Step
                key={index}
                title={item.title}
                description={item.description}
                status={item.status}
              />
            ))}
          </Steps>
        </View>
        <View>
          <Steps current={1}>
            <Step
              key={0}
              title="Finished"
              description="This is description"
              status="finish"
            />
            <Step
              key={1}
              title="Progress"
              description="This is description"
              status="progress"
            />
            <Step
            key={2}
            title="Wait"
            description="This is description"
            status="wait"
            icon={<Image
              resizeMode='stretch'
              style={{width:20,height:20}}
              source={require('../../../spiro.png')}/>}
            />
          </Steps>
        </View>
      </ScrollView>
    );
  }
}
